<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索秘制</title>
<style type="text/css">
#searchForm {
	margin: 22px auto 0;
	width: 641px;
	text-align: left;
	z-index: 100;
	position: relative;
	padding: 0;
	list-style: none;
}

.sear1 {
	border: 1px solid #b6b6b6;
	border-color: #7b7b7b #b6b6b6 #b6b6b6 #7b7b7b;
	background: #fff;
	display: inline-block;
	vertical-align: top;
	width: 501px;
	margin-right: 0;
	/* border-right-width: 0; */
	border-color: #b8b8b8 rgba(0, 0, 0, 0.28) #ccc #b8b8b8;
	overflow: hidden;
	height: 34px;
}

.sear2 {
	width: 100px;
	height: 36px;
	color: #fff;
	font-size: 15px;
	letter-spacing: 1px;
	background: #3385ff;
	border-bottom: 1px solid #2d78f4;
	border:1px solid  #3385ff;
	outline: medium;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	background-image: none;
}
.sear2:active{
   box-shadow: 1px 1px 12px #3385ff;
}
</style>

</head>
<body>
	<center>
		<form id="searchForm" action="#">
			<input class="sear1" name="keyword">
			<button class="sear2" type="button" onclick="doSearch()">酷開搜索</button>
		</form>
	</center>
	<div id="result"></div>

	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
		var form = document.getElementById("searchForm");
		var result = document.getElementById("result");
		function doSearch() {
			//采集用户输入的关键字进行查询
			// alert(searchForm.keyword.value);
			//console.log(searchForm.keyword.value);
			var keyword = form.keyword.value;
			//跟后台的第一次已步交互
			ajax({
				type : "POST",
				url : "search.do",//请求地址
				dataType : "json",
				data : {
					keyword : keyword
				},
				success : function(data) {//珦應的回調
					//data=JSON.parse(data);
					//console.log(data);
					//result.innerHTML = data;
					var li;
					result.innerHTML = "";
					for (var i = 0; i <data.length; i++) {
						li = document.createElement("li");
						li.innerHTML = data[i].title;
						result.appendChild(li);
					}
				}
			});
		}
	</script>
</body>
</html>